<%-- 
    Document   : index
    Created on : Sep 14, 2011, 7:55:26 PM
    Author     : javierpanchi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head> 
        <title>Take my Keys</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
        <link rel="stylesheet" href="/Drinkmeter/css/TabStyle.css">
    </head>
    <script src="js/simpleFacebookGraph.js"></script>
    <script src="js/general.js"></script>
    <link rel="stylesheet" href="css/TabStyle.css">

    <script>

        fb.ready(function(){ 
            if (fb.logged)
            {
                // Cambiamos el link de identificarse por el nombre y la foto del usuario.
                html = "";
                html += '<p><img src="' + fb.user.picture + '"/></p>';
                //html += '<p><a href="#" onclick="fb.logout(); return false;">Salir</a></p>';
                document.getElementById("conectar_facebook").innerHTML = html;
            }
        });


        // Funcion para logarse con Facebook.
        function login() {
            fb.login(function(){ 
                if (fb.logged) {
                    // Cambiamos el link de identificarse por el nombre y la foto del usuario.
                    html = "";
                    /*html += "<p><img onclick='saveInfo()' src='" + fb.user.picture + "'/></p>";*/
                    html += "<p><input type='hidden' name='idFacebook' value='"+fb.user.id+"'/></p>";
                    html += "<p><input type='hidden' name='nameFacebook' value='"+fb.user.name+"'/></p>";
                    html += "<p><div id='session'></div></p>";
                    html += "<p><div id='imagenes'></div></p>";
                    
                    
                    
                    //html+="<img src='/Drinkmeter/images/icons/home/addprofile.png' onclick='saveInfo()'>Profile Settings</img><br/>";
                    //html+="<img src='/Drinkmeter/images/icons/home/adddrinks.png' onclick='sendInfo()'/>";
                    document.getElementById("conectar_facebook").innerHTML = html;
                    document.getElementById("createSession").style.visibility="hidden";
                    document.getElementById("tab_home").onclick="";
                    document.getElementById("tab_home").href="javascript:sendInfo()";
                    document.getElementById("tab_friends").onclick="";
                    document.getElementById("tab_friends").href="javascript:sendInfo()";
                    document.getElementById("tab_drinks").onclick="";
                    document.getElementById("tab_drinks").href="javascript:sendInfo()";
                    document.getElementById("tab_stats").onclick="";
                    document.getElementById("tab_stats").href="javascript:sendInfo()";
                    document.getElementById("tab_locations").onclick="";
                    document.getElementById("tab_locations").href="javascript:sendInfo()";
                } else {
                    //alert("wrong user");
                }
                friends();
                //fb.logout();
            }
        )
        };

        // Funcion para publicar un mensaje en tu muro
        var publish = function () {
            fb.publish({
                message : "This is a quick demo of Drinkmeter",
                picture : "http://tux.crystalxp.net/png/uttaresh-duff-tux-13238.png",
                link : "http://comp3505.wordpress.com",
                name : "Simple Drinkmeter",
                description : "This demo app uses Graph API :)"
            },function(published){ 
                if (published)
                    alert("The information was sending to Facebook!!");
                else
                    alert("No published :( you haven't login.");
            });  
        }

        // Funcion para publicar un mensaje en tu muro
        var friends = function () {
            fb.friends();
              
        }
        
        var logout=function(){
            fb.logout();
        }

        function saveInfo(){
            document.getElementById('form1').action='/Drinkmeter/jsp/profile.jsp';
            document.getElementById('form1').submit();
        }
        
        function sendInfo(){
            document.getElementById('form1').action="/Drinkmeter/FacebookServlet"
            document.getElementById('form1').submit();
        }

    </script>
    <body>

        <div>
            <form name='form1' id='form1'  method="post">
                <div data-role="page">
                    <div data-role="header">
                        <h1>TAKE MY KEYS</h1>
                    </div>
                    <div id="conectar_facebook" align="center">
                        ${peopledrunk}<br/>
                        <!--<a href="#" onclick="login(); return false;" data-role="button" data-transition="flip">Create Session</a><br/>-->
                        <!--<a href="/Drinkmeter/jsp/drinks.jsp" data-transition="flip">Current Session</a><br/>-->
                        <!--<table border="0">
                            <tr>
                                <td colspan="3"><img src="/Drinkmeter/images/welcome/logo.jpg" data-role="image"/></td>
                            </tr>
                            <tr>
                                <td><img onclick="login(); return false;" src="/Drinkmeter/images/icons/home/addprofile.png" data-role="image"/></td>
                                <td align="center"><a href="/Drinkmeter/jsp/drinks.jsp" data-transition="flip"><img src="/Drinkmeter/images/icons/home/friends.png" data-role="image"/></a></td>
                                <td align="right"><a href="/Drinkmeter/jsp/leave.jsp" data-transition="flip"><img src="/Drinkmeter/images/icons/home/locations.png" data-role="image"/></a></td>
                            </tr>
                        </table>-->
                        <img onclick="login();logout(); return false;" src="/Drinkmeter/images/HomeScreen.png" data-role="image"/>
                    </div>
                    <script type='text/javascript'>
                        $('li.tab a').bind('click', function(event) {
                            $('li.tab a').removeClass('active');
                            $(event.target).addClass('active');
                        });
                    </script>

                </div>
        </div>

        <div id='tabbarcontainer' align="center">

            <ul id='tabbar'>
                <a id="createSession" href="#" onclick="login(); return false;">Create Session</a>
                <div id="mensajes"></div>
                <li class='tab'><a href="#" onclick="login(); return false;" id='tab_home'>Tab 1</a></li>
                <li class='tab'><a href="#" onclick="login(); return false;" id='tab_friends'>Tab 2</a></li>
                <li class='tab'><a href="#" onclick="login(); return false;" id='tab_drinks'>Tab 3</a></li>
                <li class='tab'><a href="#" onclick="login(); return false;" id='tab_stats'>Tab 4</a></li>
                <li class='tab'><a href="#" onclick="login(); return false;" id='tab_locations'>Tab 5</a></li>
            </ul>

        </form>



    </div>
</body>
</html>